<template>
  <div>
    <div>
      <FormPanel ref="formPanel" :list="formList" :cols="3" :isSubmitBtn="false" @formChange="formChangeHandle" />
      <FilterTable
        ref="table"
        columnsRef="lxxlxxqueryAccount"
        :columns="columns"
        :fetchapi="fetchApi"
        :params="fetchParams"
        :datakey="'rows'"
        :isExportExcel="true"
        :height="'auto'"
        exportFileName="项目明细.xlsx"
        :onColumnsChange="columns => (this.columns = columns)"
        :isSelectColumn="false"
        :onRowSelectChange="selectChangeHandle"
        :onSyncTableData="tableAllData"
      ></FilterTable>
      <FilterTable
        ref="tablePart"
        columnsRef="lxxlxxqueryAccountPart"
        :columns="columnsPart"
        :fetchapi="fetchApiPart"
        :params="fetchParams"
        :isExportExcel="true"
        :isSelectColumn="false"
        :height="'auto'"
        :datakey="'rows'"
        exportFileName="备件明细.xlsx"
        :onColumnsChange="columns => (this.columns = columns)"
        :onRowSelectChange="selectChangeHandlePart"
        :onSyncTableData="tableAllDataPart"
      ></FilterTable>
    </div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDialog">关闭</el-button>
      <el-button size="small" type="primary" icon="el-icon-printer" @click="dayin">打印</el-button>
    </div>
    <!-- 打印 -->
    <BasePrint ref="print" :data="printList" destroyOnClose :template="'repair/queryStatistics/printTemplate.vue'" />
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import moment from 'moment';
import dictCode from '@/utils/dictCode';
import { searchRoleByCode } from '@/api/common/empSelect/index';
import { getAllUser } from '@/api/repair/queryStatistics/queryAccounts';
import { queryDetailed, queryRepairLabourCopy, queryRepairPartCopy } from '@/api/repair/repairReception/repairBusinessManger';

export default {
  name: 'lhmMaintionClaimReceipt',
  components: {},
  mixins: [dictionary],
  props: {
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    this.saveData = {};
    return {
      fetchApi: queryRepairLabourCopy,
      fetchApiPart: queryRepairPartCopy,
      fetchParams: { roNo: this.rowData.RO_NO },
      formList: this.createFormList(),
      columns: this.createTableColumns(),
      columnsPart: this.createTableColumnsPart(),
      printList: {}, // 打印数据
      waiter: []
    };
  },
  created() {
    this.init();
  },
  mounted() {
    this.queryDetail();
    this.initSelect();
  },
  methods: {
    // 表单
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '委托书编号',
          fieldName: 'RO_NO'
        },
        {
          type: 'INPUT',
          label: '客户名称',
          fieldName: 'OWNER_NAME'
        },
        {
          type: 'INPUT',
          label: '电话',
          fieldName: 'MOBILE'
        },
        {
          type: 'INPUT',
          label: '牌照号',
          fieldName: 'LICENSE'
        },
        {
          type: 'INPUT',
          label: '底盘号',
          fieldName: 'VIN'
        },
        {
          type: 'INPUT',
          label: '发动机号',
          fieldName: 'ENGINE_NO'
        },
        {
          type: 'INPUT_NUMBER',
          label: '行驶里程',
          fieldName: 'MILEAGE',
          style: { width: 'calc(100% - 50px)' },
          descOptions: {
            content: '万公里'
          }
        },
        {
          type: 'INPUT',
          label: '车型',
          fieldName: 'MODEL'
        },
        {
          type: 'DATE_TIME',
          label: '生产日期',
          fieldName: 'PRODUCT_DATE'
        },
        {
          type: 'DATE_TIME',
          label: '发牌日期',
          fieldName: 'LICENSE_DATE'
        },
        {
          type: 'DATE_TIME',
          label: '送修日期',
          fieldName: 'CREATED_AT'
        }
      ];
    },
    // 项目列表
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          width: 70,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '项目代码',
          dataIndex: 'LABOUR_CODEF',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '项目名称',
          dataIndex: 'LABOUR_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '工时费',
          dataIndex: 'LABOUR_AMOUNT',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '服务顾问',
          dataIndex: 'SERVICE_ADVISOR',
          sorter: true,
          filter: true,
          dictItems: [],
          showOverflowTooltip: true,
          filterType: 'checkbox',
          filterItems: []
        }
      ];
    },
    // 备件列表
    createTableColumnsPart() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          width: 70,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '备件代码',
          dataIndex: 'PART_NO',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '备件名称',
          dataIndex: 'PART_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '备件数量',
          dataIndex: 'PART_QUANTITY',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '备件销售单价',
          dataIndex: 'PART_SALES_PRICE',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    init() {
      console.log('rowData', this.rowData);
      this.formList.forEach(x => {
        x.initialValue = this.rowData[x.fieldName];
        if (x.fieldName == 'MODEL') {
          x.initialValue = `${this.rowData.MODEL_CODE} | ${this.rowData.MODEL_NAME}`;
          x.disabled = true;
        }
        x.disabled = true;
      });
      // this.fetchParams = Object.assign({}, { roNo: this.rowData.RO_NO }, { xhrAbort: false });
    },

    // 打印  src/pages/repair/queryStatistics/queryAccounts/editPanel.vue
    dayin() {
      this.printList.rowData = this.rowData;
      this.printList.itemList.forEach(x => {
        x.SERVICE_ADVISOR = this.waiter.find(item => item.userId == x.SERVICE_ADVISOR).employeeName;
      });
      console.log(this.printList, 999);
      this.$refs.print.EXCUTE_PRINT();
    },
    async initSelect() {
      // 服务顾问
      let testDrive = { role: dictCode.SERVICE_CONSULTANT };
      const res = await searchRoleByCode(testDrive);
      let res5 = (await getAllUser()).data.map(x => ({ value: x.userId + '', text: x.employeeName }));
      console.log(res, '服务顾问122222222');
      this.waiter = res.data;
      this.columns.find(x => x.dataIndex == 'SERVICE_ADVISOR').filterItems = this.columns.find(x => x.dataIndex == 'SERVICE_ADVISOR').dictItems = res5;
    },
    // 查询工单明细
    async queryDetail() {
      try {
        let roNo = this.rowData.RO_NO;
        let res = await queryDetailed(roNo);
        console.log('res', res);
      } catch (err) {}
    },
    formChangeHandle(val) {
      this.saveData = val;
    },
    tableAllData(val) {
      console.log('tableData', val);
      val.forEach(x => {
        x.SERVICE_ADVISOR = this.rowData.SERVICE_ADVISOR;
      });
      this.printList.itemList = val;
    },
    selectChangeHandle(val) {
      console.log('val', val);
    },
    tableAllDataPart(val) {
      this.printList.partList = val;
    },
    selectChangeHandlePart(val) {
      console.log('val', val);
    },
    closeDialog(param) {
      this.$emit('close', false, param);
    }
  }
};
</script>

<style lang="less" scoped></style>
